<template>
	<view class="video">
		<video class="video-js" :src="nowPlayVideoUrl" autoplay="true" id="video"></video>
		<view class="h2"></view>
		<scroll-view style="height:calc(100vh - 500rpx)" scroll-y="true">

			<view class="video-con">
				<view class="title">南站</view>
				<view class="list">
					<view class="item" v-for="(item, index) in southList" :key="index"
						@click="handleClick(item,index,1)">
						<view class="active" v-if="activeIndex ==='sorth'+index">
							<view class="text">
								<image src="../../static/image/icon-video.png"></image> 查看中
							</view>
						</view>
						<view class="item-text">
							<view class="img">
								<image src="../../static/image/icon-v.png"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="title">北站</view>
				<view class="list">
					<view class="item" v-for="(item, index) in northList" :key="index"
						@click="handleClick(item,index,2)">
						<view class="active" v-if="activeIndex ==='north'+index">
							<view class="text">
								<image src="../../static/image/icon-video.png"></image> 查看中
							</view>
						</view>
						<view class="item-text">
							<view class="img">
								<image src="../../static/image/icon-v.png"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8
	import {
		getCameraList
	} from '@/api/video.js'


	export default {
		data() {
			return {
				videoName: '',
				southList: [],
				northList: [],
				player: [], //存储初始化视频，用于退出页面时销毁video.js对象
				nowPlayVideoUrl: '',
				activeName: 'name0',
				showUrl: false,
				activeIndex: 'sorth0',
			}
		},
		components: {
			// VideoCom
		},
		created() {
			this.getVideo()
		},

		methods: {
			playVideo() {
				uni.createVideoContext('video', this).requestFullScreen();
				// screen.orientation.lock('landscape');
			},
			screenchange() {
				// screen.orientation.lock('landscape');
			},
			handleClick(item, index, flag) {
				this.showUrl = false
				if (flag === 1) {
					this.activeIndex = 'sorth' + index
				} else {
					this.activeIndex = 'north' + index
				}
				this.nowPlayVideoUrl = item?.hlsUrl
				this.videoName = item.name
				this.showUrl = true
			},
			getVideo() {
				getCameraList({}).then(response => {
					const {
						data
					} = response
					if (data && data.length > 0) {

						this.southList = data.filter((item) => {
							return item.zoneId === 1
						});
						this.northList = data.filter((item) => {
							return item.zoneId === 2
						});

						this.nowPlayVideoUrl = this.southList[0]?.hlsUrl
						this.videoName = this.southList[0]?.name
						this.showUrl = true

					}


				})
			}
		}
		// 	mounted() {
		// 		let video = document.createElement('video');
		// 		video.id = 'video';
		// 		video.style = 'width: 100%; height: 100%;';
		// 		video.controls = true;
		// 		video.preload = "auto"
		// 		video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
		// 		video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
		// 		video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
		// 		let source = document.createElement('source');
		// 		source.src =
		// 			'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
		// 		video.appendChild(source);
		// 		// return
		// 		this.$refs.videos.appendChild(video);
		// 		let that = this;
		// 		let player = this.$video('video', {
		// 			poster: '', // 视频封面图地址
		// 			title: '4564564',
		// 			playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
		// 			autoDisable: true,
		// 			preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
		// 			language: 'zh-CN',
		// 			fluid: true, // 自适应宽高
		// 			muted: false, //  是否静音
		// 			aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
		// 			controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
		// 			autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
		// 			loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
		// 			screenshot: true,
		// 			controlBar: {
		// 				volumePanel: { //声音样式
		// 					inline: false // 不使用水平方式
		// 				},
		// 				timeDivider: true, // 时间分割线
		// 				durationDisplay: true, // 总时间
		// 				progressControl: true, // 进度条
		// 				remainingTimeDisplay: true, //当前以播放时间
		// 				fullscreenToggle: true, //全屏按钮
		// 				pictureInPictureToggle: true, //画中画
		// 			}
		// 		}, function() {
		// 			this.on('error', function(err) { //请求数据时遇到错误
		// 				console.log("请求数据时遇到错误", err)
		// 			});
		// 			this.on('stalled', function(stalled) { //网速失速
		// 				console.log("网速失速", stalled)
		// 			});
		// 			// this.on('play', function() { //开始播放
		// 			// 	console.log("开始播放")
		// 			// });
		// 			// this.on('pause', function() { //暂停
		// 			// 	console.log("暂停")
		// 			// });
		// 			// this.on('timeupdate', function(timeupdate) {
		// 			// 	// console.log(timeupdate)
		// 			// })
		// 		});
		// 	}

	}
</script>


<style lang="scss" scoped>
	.video {
		.video-js {
			width: 100%;
			height: 420rpx;
			margin: 0rpx auto 50rpx auto;

		}

		.h2 {
			height: 2rpx;
			width: 100vw;
			background: #E0E0E0;
		}

		.video-con {
			margin: 0rpx 0 50rpx 0;
			padding-top: 50rpx;

			.title {
				font-size: 28fpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #323232;
				padding: 0 30rpx;
				clear: both;
			}

			.list {
				margin: 20rpx 15rpx;

				.item {
					width: 210rpx;
					height: 210rpx;
					background: #F5F7FA;
					border-radius: 18rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					float: left;
					margin: 0 15rpx 20rpx 15rpx;
					position: relative;

					.item-text {
						.img {
							display: flex;
							justify-content: center;
							margin-bottom: 12rpx;

							image {
								width: 63rpx;
								height: 60rpx;
							}
						}

						.name {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #606266;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.active {
					position: absolute;
					left: 0;
					top: 0;
					background: rgba(0, 0, 0, 0.59);
					width: 210rpx;
					height: 210rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 18rpx;
					z-index: 11;

					.text {
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}

			}
		}
	}
</style>
